<template>
	<view>
		<uni-card isFull class="detail_part1" spacing="0" padding="0">
			<uni-row class="detail-part1-row1">
				<uni-col>
					<image :src="goodsDetailInfo.imageSrc" style="width: 750rpx;"></image>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part1-row2 detail-part1-row">
				<uni-col>
					<text>{{goodsDetailInfo.name}}</text>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part1-row3 detail-part1-row">
				<uni-col>
					<text>介绍：{{goodsDetailInfo.details}}</text>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part1-row4 detail-part1-row">
				<uni-col>
					<text>¥{{goodsDetailInfo.price}}</text>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part1-row5 detail-part1-row">
				<uni-col :span="12">
					<text>销量：{{goodsDetailInfo.sales}}</text>
				</uni-col>
				<uni-col :span="12">
					<text>库存：{{goodsDetailInfo.inventory}}</text>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card isFull class="detail_part2" spacing="0">
			<uni-row class="detail-part2-row1">
				<uni-col>
					<text>规格：{{goodsDetailInfo.specification}}</text>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part2-row1">
				<uni-col>
					<text>品牌：{{goodsDetailInfo.brand}}</text>
				</uni-col>
			</uni-row>
			<uni-row class="detail-part2-row1">
				<uni-col>
					<text>服务：{{goodsDetailInfo.service}}</text>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card isFull class="detail_part3" spacing="0">
			<uni-row class="detail-part3-row1">
				<uni-col :span="20">
					<text>商品评价</text>
				</uni-col>
				<uni-col :span="4">
					<view class="evaluation_show">
						<text>查看</text>
						<uni-icons type="forward" size="14"></uni-icons>
					</view>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card isFull class="detail_part4" spacing="0">
			<view class="image-text">
				<text>图文详情</text>
				<rich-text :nodes="detailRichText"></rich-text>
			</view>
		</uni-card>
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import goodsDetailApi from '../../api/goods/index.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				goodsDetailInfo: {},
				detailRichText: [],
				options: [{
					icon: 'cart',
					text: '购物车',
					info: 0
				}, {
					icon: 'star',
					text: '收藏',
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #c7fe88, #6aef2c)',
						color: '#fff'
					},
					/* {
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #6aef2c,#c7fe88)',
						color: '#fff'
					} */
				],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.handleGetGoodsDetail(option)
		},
		computed: {
			...mapState('login', ['isAuth'])
		},
		methods: {
			handleGetGoodsDetail(option) {
				goodsDetailApi.goodsDetail(option).then(({
					detailInfo,
					detailRichText,
					cartInfo,
					collectionInfo
				}) => {
					this.goodsDetailInfo = detailInfo
					this.detailRichText = detailRichText
					this.options.map(item => {
						if (item.text == '购物车') {
							if (this.isAuth) {
								item.info = cartInfo.reduce((pre, cur) => {
									return pre + cur.addToCartNum
								}, 0)
							}
						} else if (item.text == '收藏') {
							item.icon = this.goodsDetailInfo.isCollection ? 'star-filled' : 'star'
							item.text = '已收藏'
						}
					})
				})
			},
			handleAddToCart(param, opt) {
				if (this.goodsDetailInfo.inventory <= this.goodsDetailInfo.addToCartNum) {
					uni.showToast({
						title: '商品数量已达到库存',
						icon: 'error'
					})
					return
				}
				goodsDetailApi.updataAddToCartNum(param).then(res => {
					if (res.code == 200) {
						++opt.info
						this.handleGetGoodsDetail(param)
					}
				})
			},
			onClick(e) {
				if (e.index == 0) {
					uni.switchTab({
						url: '/pages/shopping-cart/shopping-cart'
					})
				} else {
					goodsDetailApi.updateCollectionStatus({
						id: this.goodsDetailInfo.id
					}).then(res => {
						if (res.code == 200) {
							e.content.icon = e.content.icon == 'star' ? 'star-filled' : 'star'
							e.content.text = e.content.icon == 'star' ? '收藏' : '已收藏'
							uni.showToast({
								title: e.content.icon == 'star' ? '取消收藏成功' : '收藏成功'
							})
						}
					})
				}
			},
			buttonClick(e) {
				this.options.map(item => {
					if (item.text == '购物车') {
						this.handleAddToCart({
							id: this.goodsDetailInfo.id
						}, item)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail_part1 {
		.detail-part1-row {
			padding-left: 10px;
		}

		.detail-part1-row2 {
			text {
				font-weight: bold;
				font-size: 20px;
				color: $uni-black;
			}
		}

		.detail-part1-row3 {
			text {
				color: $uni-info;
			}
		}

		.detail-part1-row4 {
			text {
				color: #ff200c;
				font-size: 18px;
			}
		}
	}

	.detail_part3 {
		.detail-part3-row1 {
			.evaluation_show {
				float: right;

				text {
					color: $uni-info;
				}
			}
		}
	}

	.detail_part4 {
		.image-text {
			text-align: center;

			text {
				font-size: 24px;
				font-weight: bold;
				color: $uni-black;
			}
		}
	}

	.goods_nav {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>